<script setup>
import OrderListItem from '@/components/OrderListItem.vue'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderListApi } from '@/api/order'

const route = useRoute()
const router = useRouter()

const active = ref(route.query.dataType || 'all')
const page = ref(1)
const orderList = ref([])

const getOrderList = async () => {
  const { data: { list } } = await getOrderListApi(active.value, page.value)
  list.data.forEach(item => { // 计算订单的总数量,由于返回的数据中没有该字段，所以需要手动计算
    item.total_num = 0
    item.goods.forEach(goods => {
      item.total_num += goods.total_num
    })
  })
  orderList.value = list.data
}

watch(active, () => {
  getOrderList()
}, { immediate: true })
</script>

<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="router.back()"/>

    <van-tabs v-model:active="active" sticky>
      <van-tab name="all" title="全部"></van-tab>
      <van-tab name="payment" title="待支付"></van-tab>
      <van-tab name="delivery" title="待发货"></van-tab>
      <van-tab name="received" title="待收货"></van-tab>
      <van-tab name="comment" title="待评价"></van-tab>
    </van-tabs>

    <OrderListItem v-for="item in orderList" :key="item.order_id" :item="item"></OrderListItem>
  </div>
</template>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}

.van-tabs {
  position: sticky;
  top: 0;
}
</style>

<script>
export default {
  name: 'OrderManageIndex'
}
</script>
